<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MyMusicSearch</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
body {
	padding-top: 60px;
	/* 60px to make the container go all the way to the bottom of the topbar */
    padding-bottom: 40px;
}

/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */
div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}
div.rating-cancel,div.rating-cancel a{background:url(delete.gif) no-repeat 0 -16px}
div.star-rating,div.star-rating a{background:url(star.gif) no-repeat 0 0px}
div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0px;border:0}
div.star-rating-on a{background-position:0 -16px!important}
div.star-rating-hover a{background-position:0 -32px}
/* Read Only CSS */
div.star-rating-readonly a{cursor:default !important}
/* Partial Star CSS */
div.star-rating{background:transparent!important;overflow:hidden!important}
/* END jQuery.Rating Plugin CSS */

</style>


<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Fav and touch icons -->
<link rel="shortcut icon" href="images/note.png"> 
<body style="font-family: Verdana">

<%@include file="includes/navbar.jsp" %>

	<div class="container">

		<div class="hero-unit">
			<h1>Rate this service</h1>
			</br>
			<span>How did you like the music?</span>
			<div class="Clear">
			<input class="star" type="radio" name="rating-1" value="1" title="Very bad">
			<input class="star" type="radio" name="rating-1" value="2" title="Bad"/>
			<input class="star" type="radio" name="rating-1" value="3" title="OK"/>
			<input class="star" type="radio" name="rating-1" value="4" title="Good"/>
			<input class="star" type="radio" name="rating-1" value="5" title="Very good"/>
			</div>

			</br>
			<span>How new were the songs to you?</span>
			<div class="Clear">
			<input class="star" type="radio" name="rating-2" value="1" title="Not new at all"/>
			<input class="star" type="radio" name="rating-2" value="2" title="Not very new"/>
			<input class="star" type="radio" name="rating-2" value="3" title="Somehow new"/>
			<input class="star" type="radio" name="rating-2" value="4" title="Mostly new"/>
			<input class="star" type="radio" name="rating-2" value="5" title="Totally new"/>
			</div>
			</br>
			</br>
			<p>
				<a id="btnSubmit" class="btn btn-primary btn-large">Submit rating &raquo;</a>
			</p>
		</div>

		<%@include file="includes/footer.jsp" %>
      
	</div><!-- /container -->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->

	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.pack.js"></script>
	<script type="text/javascript">
	
	$(document).ready(
			function() {
				
				$("#btnSubmit").click(function() {
					var liked = $('input[name=rating-1]:checked').val();
					var hownew = $('input[name=rating-2]:checked').val();
					
					if (liked && hownew) {
						var querystring = "{%22eval_array%22:[{%22subject%22:%22liked%22,%22score%22:"+ liked +"},{%22subject%22:%22hownew%22,%22score%22:"+ hownew +"}]}";
						$.ajax({
							type : "GET",
							url : "/start?service=evaluate&data="+querystring,
							contentType: "json",
							error : function() {
								alert("Error: Could not connect to server!");
							},
							success : function(data) {
								alert("Thank you very much!");
							}
						});
					} else {
						alert("Please rate first");
					}
				});
				
			});
	
	
	
	</script>

</body>
</html>